<template>
  <view class="content">
    <view class="filtrate" :style="{backgroundImage: homeTopAd.img?'url('+homeTopAd.img+')':'url('+topDefaultImg+')'}">
      <!--      <view class="filter-content">
              <TabsMenus :queryParams.sync="queryParams" @search="toSearch"/>
            </view>-->
      <view class="filter__content">
        <TabsMenus :queryParams.sync="queryParams" @search="toSearch"/>
      </view>
    </view>
    <view class="swiper-box" v-if="adList.length">
      <u-swiper :list="adList" showTitle height="308rpx" keyName="img"
                @click="clickSwiper"></u-swiper>
    </view>
    <view class="list-box flex flex-wrap justify-between" v-for="(list,i) in homeList" :key="i"
          :style="list.length<3?'height: 628rpx;':'height: 1084rpx;'">
      <view class="item-box" :class="formatCss(index)?'short':'tall'" @click="toDetail(item)"
            v-for="(item,index) in list" :key="index">
        <image class="bg-image" :src="item.apartmentPictureList[0]" mode="aspectFill">
        </image>
        <view class="content flex flex-column justify-between">
          <view class="tip-text">{{ item.house.roomType }}室{{ item.bedNumber }}床丨可住{{ item.checkInNumber }}人
          </view>
          <view>
            <view class="describe">{{ item.title }}</view>

            <view class="flex align-end" style="margin-top: 4rpx;">
              <text class="money">￥{{ item.todayPrice }}</text>
              <text>/晚</text>
            </view>
            <view class="flex align-end" style="margin-top: 4rpx;" v-if="item.monthRent">
              <text class="money">￥{{ item.monthRent }}</text>
              <text>/月</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="in-bottom">已经滚到底部了~</view>
    <!--   自定义底部导航栏   -->
    <tab-bar/>
  </view>
</template>

<script>
import TabsMenus from "./components/tabs-menus.vue";
import {
  homePage,
  selectArea
} from '@/api/home';
import {
  adList
} from '@/api/common';
import {
  DateDiff,
  dateToFormat,
  DateAdd
} from '@/utils/time.js'

export default {
  components: {
    TabsMenus
  },
  data() {
    return {
      topDefaultImg: 'https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/home-top.png',
      // 城市列表
      // 顶部图
      homeTopAd: {},
      // 轮播图
      adList: [],
      calendarMode: 'range',
      showCalendar: false,
      defaultDate: [],
      homeList: [],
      cityList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        leaseIntervalType: '1',//1：日租，2：短租 3：长租
        startTime: '',
        endTime: '',
        keyword: '',
        "house.cityId": '',
        checkInNumber: null, //人数
        bedNumber: null, //床数
      },
      total: 0,
      listLength: 0,
    }
  },
  computed: {
    location: {
      get() {
        return this.$store.state.user.location
      },
      set() {
      }
    },
  },
  watch: {
    location(n) {
      console.log('location', n);
      this.searchHandel()
    },
  },
  onLoad: function () {
    this.getCity();
    this.queryParams.startTime = dateToFormat()
    this.queryParams.endTime = DateAdd('day', this.queryParams.startTime, 1);
    this.getList();
  },
  onShow() {
    this.getAd('1');
    this.getAd('2');
  },
  onReachBottom() {
    if (this.listLength < this.total) {
      this.queryParams.pageNum++;
      this.getList();
    }
  },
  methods: {
    clickSwiper(e) {
      //无跳转
      if (this.adList[e].bannerType === '1') {
        return;
      }
      //内部链接
      if (this.adList[e].bannerType === '2') {
        this.$tab.navigateTo(this.adList[e].link)
        return;
      }
      //外链
      if (this.adList[e].bannerType === '3') {
        let url = this.adList[e].link;
        if (url.indexOf('http') == -1) {
          url = 'http://' + url;
        }
        this.$tab.navigateTo(`/pages/common/webview/index?url=${url}`)
        return;
      }
    },
    getAd(location = '1') {
      adList({
        location: location,
        cityCode: this.location ? this.location.id : ''
      }).then(res => {
        console.log('adList', res)
        if (location === '1') {
          this.adList = res.data;
        } else if (location === '2') {
          this.homeTopAd = res.data[0];
        }

      })
    },
    getCity() {
      let location = uni.getStorageSync('location')
      selectArea().then(res => {
        this.cityList = res.data;
        if (location && this.cityList.findIndex(item => item.id == location.id) > -1) {
          this.location = location
        } else {
          this.location = this.cityList[0];
          uni.setStorageSync('location', this.cityList[0])
          this.$store.commit('SET_LOCATION', this.cityList[0])
        }
      })

    },
    searchHandel() {
      this.queryParams.pageNum = 1;
      this.homeList = [];
      this.getList()
    },
    //获取列表
    getList() {
      function splitArr(ar, size = 1) {
        let index = 0;
        let res = [];
        while (index < ar.length) {
          res.push(ar.slice(index, (index + size)));
          index += size;
        }
        return res;
      }

      this.queryParams['house.cityId'] = this.location ? this.location.id : '';
      let data = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        'house.cityId': this.location ? this.location.id : ''
      }
      homePage(data).then(res => {
        let list = res.rows;
        this.total = res.total;
        this.listLength = this.listLength + list.length;
        let homeList = splitArr(list, 4);
        //页数为1时
        if (this.queryParams.pageNum == 1) {
          this.homeList = homeList;
        } else {
          this.homeList = this.homeList.concat(homeList);
        }
        // this.homeList = this.homeList.concat(homeList);
      })
    },
    toDetail(row) {
      let data = this.queryParams;
      data.houseId = row.houseId;
      uni.navigateTo({
        url: `/pages/main/room/roomDetail?data=${encodeURIComponent(JSON.stringify(data))}`
      })
    },
    toSearch() {
      let data = {
        ...this.queryParams,
        'house.cityId': this.location ? this.location.id : '',
      }
      delete data.house
      console.log('toSearchdata', data)
      uni.navigateTo({
        url: `/pages/main/search?data=${encodeURIComponent(JSON.stringify(data))}`
      })
    },
    formatCss(index) {
      let i = index + 1;
      if (i % 4 == 2 || i % 4 == 3) {
        return true
      } else {
        return false
      }
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #FFFFFF !important;
}

.filtrate {
  background-color: #fff;
  background-size: 750rpx 562rpx;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 812rpx;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;

  .filter-content {
    width: 704rpx;
    //height: 400rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(152, 152, 152, 0.16);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-top: 380rpx;
    margin-left: 24rpx;
    padding: 20rpx 30rpx;
  }

  .filter__content {
    margin-top: 380rpx;
    width: 704rpx;
    box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(152, 152, 152, 0.16);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    height: 432rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.list-box {
  padding-left: 24rpx;
  padding-right: 22rpx;
  width: 750rpx;
  margin-top: 34rpx;
  margin-bottom: 20rpx;
}


.list-box view:nth-child(4) {
  position: relative;
  top: -152rpx;
}

.tall {
  height: 608rpx;
}

.short {
  height: 456rpx;
}

.item-box {
  width: 342rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  position: relative;
  margin-bottom: 20rpx;
  color: #FFFFFF;

  .bg-image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 20rpx;
  }

  .content {
    padding: 18rpx 16rpx;
    height: 100%;
    background: transparent;
  }

  .describe {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    box-orient: vertical;

    font-weight: bold;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: left;
  }

  .money {

    font-weight: 500;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: left;


  }

  .night-text {

    font-weight: bold;
    font-size: 20rpx;
    color: #FFFFFF;
    text-align: left;


  }

  .tip-text {
    width: 184rpx;
    height: 38rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 24rpx 24rpx 24rpx 24rpx;

    font-weight: 500;
    font-size: 20rpx;
    color: #FFFFFF;
    line-height: 38rpx;
    text-align: center;


  }

}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.search-btn {
  width: 644rpx;
  height: 80rpx;
  background: #FF7947;
  border-radius: 20rpx;

  font-weight: 800;
  font-size: 36rpx;
  margin-top: 20rpx;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.in-bottom {

  font-weight: 500;
  font-size: 24rpx;
  color: #B5B5B5;
  text-align: center;


  margin-top: 14rpx;
  margin-bottom: 28rpx;
}

.filtrate-bed {
  .title {

    font-weight: 800;
    font-size: 34rpx;
    color: #000000;
    text-align: center;


    margin-top: 38rpx;
    margin-bottom: 44rpx;
  }

  .main-title {

    font-weight: bold;
    font-size: 30rpx;
    color: #000000;
    text-align: left;


    margin-bottom: 24rpx;
  }

  .select-btn {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    grid-gap: 24rpx;
  }

  .item-man {
    width: 210rpx;
    height: 70rpx;
    background: #F7F7F7;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    font-weight: 500;
    line-height: 70rpx;
    font-size: 26rpx;
    color: #333333;
    text-align: center;


    margin-bottom: 18rpx;
    position: relative;
  }

  .item-active {
    border: 2rpx solid #FF7947;
    color: #FF7947;
    font-weight: 800;
  }

  .submit-btn {
    width: 690rpx;
    height: 88rpx;
    background: #FF7947;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    line-height: 100rpx;
    text-align: center;
    margin-top: 68rpx;
  }

  .clear-btn {
    width: 690rpx;
    height: 88rpx;
    background: #fff;
    border: 1rpx solid #FF7947;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 500;
    font-size: 30rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 10rpx 0 50rpx 0;
  }

  .active-img {
    width: 28rpx;
    height: 24rpx;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.swiper-box {
  width: 704rpx;
  margin-left: 24rpx;
  margin-top: 36rpx;
  margin-bottom: 34rpx;
}
</style>
